<template>
  <div class="button">
    <svg class="bell" viewBox="0 0 448 512">
      <path
        d="M224 0c-17.7 0-32 14.3-32 32V49.9C119.5 61.4 64 124.2 64 200v33.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416H424c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4V200c0-75.8-55.5-138.6-128-150.1V32c0-17.7-14.3-32-32-32zm0 96h8c57.4 0 104 46.6 104 104v33.4c0 47.9 13.9 94.6 39.7 134.6H72.3C98.1 328 112 281.3 112 233.4V200c0-57.4 46.6-104 104-104h8zm64 352H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z"
      ></path>
    </svg>

    <div class="leftTop" v-if="placement === Placement.leftTop">
      <div class="line">
        <div class="diagonalLine"></div>
      </div>
      <div class="tips">
        <div class="contet">{{ tips }}</div>
      </div>
    </div>

    <div class="leftBottom" v-if="placement === Placement.leftBottom">
      <div class="line">
        <div class="diagonalLine"></div>
      </div>
      <div class="tips">
        <div class="contet">{{ tips }}</div>
      </div>
    </div>

    <div class="rightTop" v-if="placement === Placement.rightTop">
      <div class="line">
        <div class="diagonalLine"></div>
      </div>
      <div class="tips">
        <div class="contet">{{ tips }}</div>
      </div>
    </div>

    <div class="rightBottom" v-if="placement === Placement.rightBottom">
      <div class="line">
        <div class="diagonalLine"></div>
      </div>
      <div class="tips">
        <div class="contet">{{ tips }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from 'vue'

enum Placement {
  leftTop = 'leftTop',
  leftBottom = 'leftBottom',
  rightBottom = 'rightBottom',
  rightTop = 'rightTop',
}

const props = defineProps({
  tips: { type: String, defalut: 'tips' },
  visible: { type: Boolean, defalut: false },
  placement: { type: String, default: Placement.rightBottom },
})

onMounted(() => {
  tipsHandle()
  visibleHandle()
  placementHandle()
})

watch(
  () => props.tips,
  () => tipsHandle()
)

watch(
  () => props.visible,
  () => visibleHandle()
)

watch(
  () => props.placement,
  () => placementHandle()
)

// 操作栏标签
const tips = ref<string>('tips')
const tipsHandle = () => {
  if (!props.tips) return (tips.value = 'tips')

  if (props.tips.trim().length === 0) tips.value = 'tips'
  else tips.value = props.tips
}

// tips栏是否显示
// const visible = ref<'visible' | 'hidden'>('visible')
const visible = ref<any>('visible')
const visibleHandle = () => {
  if (props.visible) visible.value = 'visible'
  else visible.value = 'hidden'
}

// tips栏位置
const placement = ref<Placement>(Placement.rightBottom)
const placementHandle = () => {
  if (props.placement === 'leftTop') placement.value = Placement.leftTop
  if (props.placement === 'leftBottom') placement.value = Placement.leftBottom
  if (props.placement === 'rightBottom') placement.value = Placement.rightBottom
  if (props.placement === 'rightTop') placement.value = Placement.rightTop
}
</script>

<style lang="less" scoped>
.button {
  width: 30px;
  height: 30px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition-duration: 0.3s;
  border: none;

  // background-color: rgb(248, 186, 186);

  .bell {
    width: 18px;
    animation: bellRing 0.9s both infinite;

    path {
      fill: #6a6a6a;
    }
  }

  /* bell ringing animation keyframes*/
  @keyframes bellRing {
    0%,
    100% {
      transform-origin: top;
    }

    15% {
      transform: rotateZ(10deg);
    }

    30% {
      transform: rotateZ(-10deg);
    }

    45% {
      transform: rotateZ(5deg);
    }

    60% {
      transform: rotateZ(-5deg);
    }

    75% {
      transform: rotateZ(2deg);
    }
  }

  &:hover .leftTop .line {
    visibility: visible;
  }
  &:hover .leftTop .tips {
    visibility: visible;
  }

  &:hover .leftBottom .line {
    visibility: visible;
  }
  &:hover .leftBottom .tips {
    visibility: visible;
  }

  &:hover .rightTop .line {
    visibility: visible;
  }
  &:hover .rightTop .tips {
    visibility: visible;
  }

  &:hover .rightBottom .line {
    visibility: visible;
  }
  &:hover .rightBottom .tips {
    visibility: visible;
  }

  > .leftTop {
    > .line {
      width: 30px;
      height: 30px;
      position: absolute;
      left: -100%;
      top: -100%;
      visibility: v-bind('visible');

      > .diagonalLine {
        width: 42px;
        height: 1px;
        background-color: #6a6a6a;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(225deg);
        transform-origin: center center;
      }
    }

    > .tips {
      width: 30px;
      height: 30px;
      position: absolute;
      left: calc(-100% - 30px);
      top: -100%;
      visibility: v-bind('visible');

      display: flex;
      align-items: center;
      justify-content: center;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: calc(-100% - 20px);
        width: 80px;
        height: 1px;
        background-color: #6a6a6a;
      }

      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: -60px;
        transform: translate(20%, 50%) rotate(45deg);
        width: 6px;
        height: 6px;
        border: 2px solid #f84a4a;
        border-radius: 50%;
        animation: load-pulse 1.1s infinite linear;
      }

      > .contet {
        width: 120px;
        height: 100%;
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #6a6a6a;
        position: absolute;
        top: calc(-100% - 5px);
        left: calc(-100% - 20px);
      }
    }
  }

  > .leftBottom {
    > .line {
      width: 30px;
      height: 30px;
      position: absolute;
      left: -100%;
      bottom: -100%;
      visibility: v-bind('visible');

      > .diagonalLine {
        width: 42px;
        height: 1px;
        background-color: #6a6a6a;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(135deg);
        transform-origin: center center;
      }
    }

    > .tips {
      width: 30px;
      height: 30px;
      position: absolute;
      left: calc(-100% - 30px);
      bottom: -100%;
      visibility: v-bind('visible');

      display: flex;
      align-items: center;
      justify-content: center;

      &::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: calc(-100% - 20px);
        width: 80px;
        height: 1px;
        background-color: #6a6a6a;
      }

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: -60px;
        transform: translate(20%, 50%) rotate(45deg);
        width: 6px;
        height: 6px;
        border: 2px solid #f84a4a;
        border-radius: 50%;
        animation: load-pulse 1.1s infinite linear;
      }

      > .contet {
        width: 120px;
        height: 100%;
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #6a6a6a;
        position: absolute;
        bottom: calc(-100% - 5px);
        left: calc(-100% - 20px);
      }
    }
  }

  > .rightTop {
    > .line {
      width: 30px;
      height: 30px;
      position: absolute;
      right: -100%;
      top: -100%;
      visibility: v-bind('visible');

      > .diagonalLine {
        width: 42px;
        height: 1px;
        background-color: #6a6a6a;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(135deg);
        transform-origin: center center;
      }
    }

    > .tips {
      width: 30px;
      height: 30px;
      position: absolute;
      right: calc(-100% - 30px);
      top: calc(-100% - 30px);
      visibility: v-bind('visible');

      display: flex;
      align-items: center;
      justify-content: center;

      &::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 80px;
        height: 1px;
        background-color: #6a6a6a;
      }

      &::after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 80px;
        transform: translate(20%, 50%) rotate(45deg);
        width: 6px;
        height: 6px;
        border: 2px solid #f84a4a;
        border-radius: 50%;
        animation: load-pulse 1.1s infinite linear;
      }

      > .contet {
        width: 120px;
        height: 100%;
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #6a6a6a;
        position: absolute;
        top: -5px;
        left: 5px;
      }
    }
  }

  > .rightBottom {
    > .line {
      width: 30px;
      height: 30px;
      position: absolute;
      right: -100%;
      bottom: -100%;
      visibility: v-bind('visible');

      > .diagonalLine {
        width: 42px;
        height: 1px;
        background-color: #6a6a6a;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
        transform-origin: center center;
      }
    }

    > .tips {
      width: 30px;
      height: 30px;
      position: absolute;
      right: calc(-100% - 30px);
      bottom: -100%;
      visibility: v-bind('visible');

      display: flex;
      align-items: center;
      justify-content: center;

      &::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 80px;
        height: 1px;
        background-color: #6a6a6a;
      }

      &::after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 80px;
        transform: translate(20%, 50%) rotate(45deg);
        width: 6px;
        height: 6px;
        border: 2px solid #f84a4a;
        border-radius: 50%;
        animation: load-pulse 1.1s infinite linear;
      }

      > .contet {
        width: 120px;
        height: 100%;
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #6a6a6a;
        position: absolute;
        top: -5px;
        left: 5px;
      }
    }
  }
}

@keyframes load-pulse {
  0% {
    transform: scale(0.15);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}
</style>
